<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DAPP</title>
    <link href="css/style.css" rel="stylesheet">
</head>
<body>
    <div id="app">
        <div class="bg">
          <img src="images/bg_01.png" />
          <img src="images/bg_02.png" />
          <img src="images/bg_03.png" />
          <img src="images/bg_04.png" />
        </div>
        <div class="contentMain">
        <div class="top">
          <div class="wrap">
            <div class="logo">
              <img src="images/logo.png">
            </div>
            <div class="logoTxt">
              <img src="images/logo_txt.png">
            </div>
            <div class="text">AN OPEN SOURCE BLOCKCHAIN GAME JUST ENJOY IT</div>
            <div class="line">2020/09/01 HERE WE GO</div>
            <div class="menu">
              <i></i>
              <ul class="menuMore" style="display:none;">
                <li class="active"><i class="cn"></i>中文</li>
                <li><i class="en"></i>English</li>
              </ul>
            </div>
          </div>
        </div>
    
        <div class="chartBox">
          <div class="wrap">
            <div class="per">
              <div class="box">
                <h4>999,999</h4>
                <p>盛世宝藏</p>
                <div class="chart">
                  <div id="chart1"></div>
                </div>
              </div>
            </div>
            <div class="per">
              <div class="box">
                <h4>999,999</h4>
                <p>签约池</p>
                <div class="chart">
                  <div id="chart2"></div>
                </div>
              </div>
            </div>
            <div class="per">
              <div class="box">
                <h4>999,999</h4>
                <p>溢出池</p>
                <div class="chart">
                  <div id="chart3"></div>
                </div>
              </div>
            </div>
            <div class="per">
              <div class="box">
                <h4>999,999</h4>
                <p>日冠军池</p>
                <div class="chart">
                  <div id="chart4"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
    
        <div class="infoBox">
          <div class="wrap">
            盛世宝藏24小时开一次奖，宝藏50%将给予最后100名签约地址，宝藏50%将给予全网V级团队，每有一枚新签约ETH，时间将延长3个时。
          </div>
        </div>
        <div class="tit_join">
          <img src="images/tit_join.png">
        </div>
        <div class="mainBox">
          <div class="wrap">
            <div class="per">
              <div class="box signBox">
                <h2>我的收益</h2>
                <div class="text">
                  <p>签约币种<input type="text" /><span class="lab">ETH</span></p>
                  <p>已结算静态收益<span class="lab">ETH</span></p>
                  <p>已结算推广收益<span class="lab">ETH</span></p>
                  <p>离出局剩余收益<span class="lab">ETH</span></p>
                </div>
                <div class="count">
                  <p>可结算收益<span class="lab">ETH</span></p>
                  <p>可提现收益<span class="lab">ETH</span></p>
                </div>
                <div class="iconBox">
                  <div class="icon1"></div>
                  <div class="icon2"></div>
                </div>
                <div class="settlement"><a href="javascript:;">结算</a></div>
              </div>
            </div>
            <div class="per">
              <div class="box inviteBox">
                <h2>我的邀请</h2>
                <div class="text">
                  <p>我的邀请链接：OXOXOXOXOXoxoxo....<span class="lab"><a href="javascript:;">复制</a></span></p>
                  <p>邀请人数<input type="text"/></p>
                  <p>我的邀请人地址：OXOXOXOXOX.OX.OX..............</p>
                </div>
              </div>
            </div>
            <div class="per">
              <div class="btnBox">
                <a href="javascript:;">签约</a>
              </div>
            </div>
            <div class="per">
              <div class="btnBox">
                <a href="javascript:;">提现</a>
              </div>
            </div>
          </div>
        </div>
        <div class="transRankAll">
          <div class="transductive">
            <div class="wrap">
              <div class="tabTit">
                <div>
                  <span class="active">单日直推</span>
                  <span>历史直推</span>
                </div>
              </div>
              <div class="per">
                <div class="box singleDay">
                  <h2>我的邀请</h2>
                  <h3>单日直推币数前 6 名</h3>
                  <ul>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                    <li>OX.OX.OX.OX.OX.OX.OX.OX.OX.OX......( 10 )</li>
                  </ul>
                  <div class="fot">我的单日直推币数: ETH</div>
                </div>
              </div>
              <div class="per" style="display:none">
                <div class="box yesterdayBox">
                  <h2><font>昨日直推</font><span>我的昨日直推币数<b>200</b>ETH</span></h2>
                  <h3>昨日直推币数排行</h3>
                  <ul>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                    <li>
                      <div class="l">
                        <p class="imp">直推数：2998</p>
                        <p>OX.OX.OXX.OXOX</p>
                      </div>
                      <div class="r">
                        <p class="imp">500ETH</p>
                        <p>奖励</p>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
    
          <div class="rankResult">
            <div class="wrap">
              <div class="tabTit">
                <div>
                  <span class="active">VIP榜单</span>
                  <span>溢出结果</span>
                  <span>抽奖结果</span>
                  <span>盛世排名</span>
                </div>
              </div>
              <div class="per">
                <div class="box vipRank">
                  <h2>VIP榜单</h2>
                  <h3>全网V级玩家列表</h3>
                  <ul>
                    <li><i class="ico ico-v1"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v2"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v3"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v1"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v2"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v3"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v1"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v2"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v3"></i>XO44644682065465D4FS6DF4SDF6</li>
                    <li><i class="ico ico-v1"></i>XO44644682065465D4FS6DF4SDF6</li>
                  </ul>
                </div>
              </div>
              <div class="per" style="display: none;">
                <div class="box overflowResults">
                  <h2>溢出结果</h2>
                  <h3>溢出结果榜单</h3>
                  <ul>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    <li><span class="time">10:10:20</span>XO44644682065465D4FS6DF4SDF6</li>
                    </ul>
                </div>
              </div>
              <div class="per" style="display: none;">
                <div class="box lotteryBox">
                  <h2>抽奖结果</h2>
                  <h3>抽奖结果榜单</h3>
                  <ul>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                    <li>XO44644682065465D4FS6DF4SDF6<p><b>500</b>ETH<em>奖励</em></p></li>
                  </ul>
                </div>
              </div>
              <div class="per" style="display: none;">
                <div class="box prosperousRank">
                  <h2>盛世排行</h2>
                  <ul>
                    <li><div class="txt">XO44644682065465D4FS6DF4SDF6</div><h4>投入: 22,22,32,342</h4><p><b>500</b>ETH<em>奖励</em></p></li>
                    <li><div class="txt">XO44644682065465D4FS6DF4SDF6</div><h4>投入: 22,22,32,342</h4><p><b>500</b>ETH<em>奖励</em></p></li>
                    <li><div class="txt">XO44644682065465D4FS6DF4SDF6</div><h4>投入: 22,22,32,342</h4><p><b>500</b>ETH<em>奖励</em></p></li>
                    <li><div class="txt">XO44644682065465D4FS6DF4SDF6</div><h4>投入: 22,22,32,342</h4><p><b>500</b>ETH<em>奖励</em></p></li>
                    <li><div class="txt">XO44644682065465D4FS6DF4SDF6</div><h4>投入: 22,22,32,342</h4><p><b>500</b>ETH<em>奖励</em></p></li>
                  </ul>
                  <div class="fot">
                    <h5>
                      <span class="wid1">19,234,525</span>
                      <span class="wid2">50</span>
                      <span class="wid3">210<em>ETH</em></span>
                    </h5>
                    <p>
                      <span class="wid1">前百最低投入</span>
                      <span class="wid2">当前排名</span>
                      <span class="wid3">投入：19,234,525</span>
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      </div>
      <script type="text/javascript" src="js/jquery.min.js"></script>
      <script type="text/javascript" src="js/echarts.min.js"></script>
      <script type="text/javascript" src="js/mycharts.js"></script>
    <script type="text/javascript" src="js/ethjs.js"></script>
    <script type="text/javascript" src="js/ethjs-unit.js"></script>
    <script type="text/javascript" src="js/ethjs-util.js"></script>
    <script>
        $('.menu i').bind('click',function(e){
            e.stopPropagation();
            $('.menu .menuMore').toggle();
            console.log('aaa');
        })
        $('.menu .menuMore li').bind('click',function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.menu .menuMore').hide();
        })
        $('#app').bind('click',function(e){
            e.stopPropagation();
            console.log('bll');
            $('.menu .menuMore').hide();
        })
        var isPc = true;
        $('.tabTit span').bind('click',function(){
            if(!isPc){
                $(this).addClass('active').siblings('span').removeClass('active');
                $(this).parents('.tabTit').siblings('.per').eq($(this).index()).show().siblings('.per').hide();
            }
        })
        function isPcFun(){
            window.screenWidth = document.body.clientWidth;
            if(window.screenWidth>=1200){
                isPc = true;
                $('#app').addClass('pc').removeClass('mobile');
            }else{
                isPc = false;
                $('#app').removeClass('pc').addClass('mobile');
            }

        }
        
        var eth = new Eth(web3.currentProvider);
      var el = function(id){ return document.querySelector(id); };
        var SimpleStoreABI = [{"constant":false,"inputs":[{"name":"val","type":"uint256"}],"name":"caclDayAmt","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"},{"name":"vnext_15","type":"address[15]"}],"name":"caclLevel","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"caclsub","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"caclWing","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"isRevel","type":"bool"}],"name":"callBaseSend","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"value","type":"uint256"}],"name":"callowner","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"m0","type":"uint256"}],"name":"drawblock","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"initbase","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"cur","type":"address"},{"name":"amt","type":"uint256"}],"name":"initFirst","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"sender","type":"address"},{"name":"val","type":"uint256"}],"name":"initOut","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"value","type":"uint256"}],"name":"initstore","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"i","type":"uint256"},{"name":"cur","type":"address"},{"name":"amt","type":"uint256"}],"name":"initVip","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"parent","type":"address"}],"name":"join","outputs":[],"payable":true,"stateMutability":"payable","type":"function"},{"constant":false,"inputs":[{"name":"addr","type":"address"}],"name":"randReward","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"rewardlevel","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[],"name":"settle","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"payable":true,"stateMutability":"payable","type":"fallback"},{"inputs":[{"name":"tl","type":"address"}],"payable":true,"stateMutability":"payable","type":"constructor"},{"constant":false,"inputs":[],"name":"vipcacl","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"addr","type":"address"}],"name":"caclAlllevel","outputs":[{"name":"","type":"address[15]"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"caclSettle","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"addr","type":"address"},{"name":"i","type":"uint256"}],"name":"findLevelAddr","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"p1","outputs":[{"name":"v1","type":"address"},{"name":"v3","type":"uint256"},{"name":"v4","type":"uint256"},{"name":"v9","type":"uint256"},{"name":"v12","type":"uint256"},{"name":"v10","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"shv","outputs":[{"name":"v11","type":"uint8"},{"name":"v13","type":"uint8"},{"name":"v14","type":"uint8"},{"name":"vip1","type":"uint8"},{"name":"vip2","type":"uint8"},{"name":"vip3","type":"uint8"},{"name":"v16","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"store1","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"store2","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"store2_","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"store2_n","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v16","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v17","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v19","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v20","outputs":[{"name":"addr","type":"address"},{"name":"w9","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v21","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v21_amt","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"v22","outputs":[{"name":"v1","type":"uint256"},{"name":"v3","type":"uint256"},{"name":"v4","type":"uint256"},{"name":"v5","type":"uint256"},{"name":"v6","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v22_vip1","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v22_vip2","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v22_vip3","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v23","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v23_amt","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v24","outputs":[{"name":"addr","type":"address"},{"name":"w9","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"v4","outputs":[{"name":"v1","type":"uint256"},{"name":"v2","type":"uint256"},{"name":"v13","type":"uint256"},{"name":"v3","type":"address"},{"name":"v4","type":"bool"},{"name":"v5","type":"uint256"},{"name":"v6","type":"uint256"},{"name":"v7","type":"uint256"},{"name":"v8","type":"uint256"},{"name":"v9","type":"uint256"},{"name":"v10","type":"uint256"},{"name":"v11","type":"uint256"},{"name":"v12","type":"uint256"},{"name":"v14","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v5","outputs":[{"name":"","type":"address"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":true,"inputs":[{"name":"","type":"uint256"}],"name":"v8","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"}];
        var SimpleStore;
        function init(){
            drawCount('chart1','20:00:00','10:10:00','#F85182','#F85182');
            drawStatic('1%');
            drawPercent('chart3','50%','#BC9F6A','#FF8A00');
            drawCount('chart4','30:00:00','09:10:00','#BC9F6A','#0075FF');
            //初始化
            SimpleStore = eth.contract(SimpleStoreABI).at('0x33A02DA260b9C48f1348D6F56E0d5f34134779E8');
            //获取我的收益
        }
        $(function(){
            isPcFun();
            init();
        })
        window.onresize = function() {
            var res;
            if (res){clearTimeout(res)}
            res = setTimeout(function(){isPcFun();init();},20);
        }; 




    </script>
</body>
</html>